<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-autocomplete
          class="inline-input"
          placeholder="切换城市"
          v-model="city"
          :trigger-on-focus="false"
          :fetch-suggestions="querySearch"
          @select="handleSelect"
        ></el-autocomplete>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="date"
          type="daterange"
          prefix-icon="el-icon-date"
          start-placeholder="入住日期"
          end-placeholder="离店日期"
          style="width:350px;"
          value-format="yyyy-MM-dd"
          :editable="false"
          :picker-options="pickerOptions"
          @change="handleDate"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="persons"
          placeholder="人数未定"
          suffix-icon="el-icon-user"
          readonly="readonly"
          v-popover:popover
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查看价格</el-button>
      </el-form-item>
    </el-form>
    <!-- 弹出框 -->
    <el-popover
      ref="popover"
      placement="bottom-start"
      width="300"
      trigger="focus"
      style="left:614px;"
    >
      <el-row type="flex" justify="space-around" align="middle">
        <el-col :span="7">每间</el-col>
        <el-col :span="7">
          <el-select v-model="value" size="mini" @change="handleChange">
            <el-option v-for="item in 7" :key="item" :label="item" :value="item+'成人'"></el-option>
          </el-select>
        </el-col>
        <el-col :span="7">
          <el-select v-model="value2" size="mini" @change="handleChange">
            <el-option v-for="(item,i) in 4" :key="i" :label="i" :value="i+'儿童'"></el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-divider />
      <el-row type="flex" justify="end">
        <el-button type="primary" size="mini">确定</el-button>
      </el-row>
    </el-popover>
  </div>
</template>

<script>
export default {
  data() {
    return {
      city: "",
      date: "",
      persons: "",
      value: 0,
      value2: 0,
      cityData: [],
      time: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      }
    };
  },
  methods: {
    //人数下拉框
    handleChange(val) {
      console.log(val);
    },
    async querySearch(queryString, cb) {
      let data = await this.getCityData(queryString);
      // console.log(data);
      let result = [];
      data.forEach(item => {
        result.push({ value: item.name });
      });
      // console.log(result);
      cb(result);
    },
    //选择时间
    handleDate(date) {
      // console.log(date);
      this.time = date;
    },
    handleSelect(val) {
      // console.log(val);
      let data = this.cityData.filter(item => {
        return item.name === val.value;
      });
      this.$emit("on-search", data);
    },
    async getCityData(city) {
      let res = await this.$axios.get("cities", { params: { name: city } });
      // console.log(res);
      const { data } = res.data;
      this.cityData = data;
      return Promise.resolve(data);
    },
    onSubmit() {
      this.$emit("on-click", this.cityData, this.time);
    }
  }
};
</script>

<style lang="less" scoped>
</style>